<template>
	<view class="cart-bottom">
		<view class="cart-check">
			<label class="radio" @click="chooseAll">
				<radio :checked="isFullCheck" color="#c00000" /><text>全选</text>
			</label>
		</view>
		<view class="cart-total">合计：<text class="cart-count">￥{{totalPrice}}</text></view>
		<view class="cart-cal" @click="checkCount">结算({{acountNum}})</view>
	</view>
</template>

<script>
	import { mapGetters, mapMutations, mapState } from 'vuex';
	export default {
		name:"my-account",
		data() {
			return {
				seconds: 3,
				timer:null,
			};
		},
		computed:{
			...mapState('m_cart',['cart']),
			...mapGetters('m_cart', ['acountNum','totalPrice','cartNum']),
			...mapState('m_user',['token','redirect','addressInfo']),
			...mapGetters('m_user', ['adr']),
			isFullCheck(){
				return  this.acountNum == this.cartNum
			}
		},
		methods:{
			...mapMutations('m_cart',['updateGoodsState']),
			...mapMutations('m_user', ['updateRedirect']),
			// 全选全不选
			chooseAll(){
				this.updateGoodsState(!this.isFullCheck)
			},
			// 结算前的检查
			checkCount(){
				if(!this.acountNum) return uni.$showMsg('请选择结算的商品！');
				if(!this.adr) return uni.$showMsg('请选择收货地址！');
				if(!this.token)return this.delayJump();
				
				// 创建订单
				this.payOrder()
				
			},
			// 创建订单 获取订单编号
			async payOrder(){
				const query ={
					order_price: this.totalPrice,
					consignee_addr: this.addressInfo,
					goods:this.cart.filter(x=>x.goods_state).map(x=>({
						goods_id:x.goods_id,
						goods_number: x.goods_count,
						goods_price:x.goods_price
					}))
				}
				const {data: res} = await uni.$http.post(uni.api.CREATE,query)
				// 获取创建的订单编号
				if(res.meta.status !== 200)return uni.$showMsg('创建订单失败！')
				// 订单预支付
				this.prePay(res.order_number)
			},
			// 订单预支付
			async prePay(code){
				const {data:res} = await uni.$http.post(uni.api.PAY, {order_number:code})
				if(res.meta.status!==200)return uni.$showMsg('预付订单生成失败！')
				const payInfo = res.message.pay;
				// 发起微信支付 调用uni.requestPayment()发起微信支付
				const [err, resPay] = await uni.requestPayment(payInfo)
				// 未完成支付
				if(err) return uni.$showMsg('订单未支付')
				// 完成了支付进一步查询支付的结果
				const {data: res3}=await uni.$http.post(uni.api.CHECK_ORDER,{order_number:code})
				// 检测到订单未支付
				if(res3.meta.status!==200)return uni.$showMsg('订单未支付')
				// 检测到订单支付成功
				uni.showToast({
					title:'支付完成！',
					icon:'success'
				})
				
			},
			// 提示
			showTips(n){
				uni.showToast({
					icon:'none',
					title: '请先登录在结算，您将在'+n+'秒后跳转到登录页面',
					mask: true,
					duration: 1500
				})
			},
			delayJump(){
				const that=this
				that.seconds = 3; // 这里要重置一下 不然第二次第三次就不会跳转了
				that.showTips(that.seconds)
				that.timer = setInterval(function(){
					that.seconds--
					if(that.seconds<=0){
						clearInterval(that.timer)
						that.timer = null;
						uni.switchTab({
							url:'/pages/my/my'
						})
						that.updateRedirect({
							type:'switchTab',
							from: '/pages/cart/cart'
						})
						return
					}
					that.showTips(that.seconds)
				},1000)
			}
		}
	}
</script>

<style lang="scss">
.cart-bottom{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	border-top: 1px solid #efefef;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	.cart-check{
		display: flex;
		align-items: center;
		font-size: 13px;
		padding-left: 10rpx;
		.radio{
			display: flex;
			align-items: center;
		}
	}
	.cart-total{
		font-size: 13px;
		color: gray;
		.cart-count{
			color: #c00000;
			font-weight: bold;
		}
	}
	.cart-cal{
		color: #fff;
		background-color: #c00000;
		min-width: 100px;
		line-height: 100rpx;
		text-align: center;
	}
}
</style>